<template>
  <div class="wpwork-common-layout">
    <div class="wpwork-common-layout-center">
      <el-row class="wpwork-common-search-box" :gutter="16">
        <el-form @submit.native.prevent>
          <el-col :span="4">
            <el-form-item label="任务标题">
              <el-input v-model="pageInfo.fText" placeholder="请输入任务标题" clearable
                        @keyup.enter.native="search()" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="任务状态">
              <el-select v-model="pageInfo.fExecutionStatus" placeholder="请选择状态" clearable>
                <el-option label="全部" value=""></el-option>
                <el-option label="已完成" value="已完成"></el-option>
<!--                <el-option label="进行中" value="进行中"></el-option>-->
                <el-option label="未完成" value="未完成"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="任务类型">
              <el-select v-model="pageInfo.fType" placeholder="请选择类型" clearable>
                <el-option label="全部" value=""></el-option>
                <el-option label="协同任务" value="协同任务"></el-option>
                <el-option label="个人任务" value="个人任务"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="任务接收人">
              <el-input v-model="pageInfo.fRealName" placeholder="请输入任务接收人" clearable
                        @keyup.enter.native="search()" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
              <el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="wpwork-common-layout-main wpwork-flex-main">
<!--        <div class="wpwork-common-head" style="justify-content: flex-start;">-->
<!--          <el-button type="primary" icon="el-icon-plus" @click="addHandle()">新增</el-button>-->
<!--          <el-button type="primary" icon="el-icon-download">导出</el-button>-->
<!--        </div>-->
        <wpwork-table v-loading="listLoading" :data="list">
          <el-table-column prop="ftext" label="任务标题" show-overflow-tooltip width="250" />
          <el-table-column prop="fexecutionStatus" label="任务状态" width="200">
            <template slot-scope="scope">
              <span
                :style="scope.row.fexecutionStatus == '已完成' ? 'color: #5AC725;':'color: #F14141;'">
                {{ scope.row.fexecutionStatus }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="ftype" label="任务类型" width="250" />
          <el-table-column prop="frealName" label="任务接收人" width="150" />
          <el-table-column prop="finstantperson" label="负责人" width="200">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.finstantperson === '负责人'" type="success">{{ scope.row.finstantperson }}</el-tag>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="fbegindate" label="开始时间" width="170">
            <template slot-scope="scope">
              {{ formatDate(scope.row.fbegindate) }}
            </template>
          </el-table-column>
          <el-table-column prop="fenddate" label="结束时间" width="170">
            <template slot-scope="scope">
              {{ formatDate(scope.row.fenddate) }}
            </template>
          </el-table-column>

          <el-table-column label="操作" fixed="right" width="150">
            <template slot-scope="scope">
              <el-button type="text" @click="openDetails(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </wpwork-table>

        <!-- 分页组件 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageInfo.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          style="margin-top: 16px; text-align: right;"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 任务详情对话框 -->
    <el-dialog
      :title="detailDialogTitle"
      :visible.sync="detailVisible"
      width="70%"
      :close-on-click-modal="false"
      @close="handleDetailClose"
    >
      <TaskDetail
        v-if="detailVisible"
        :taskData="currentTask"
        @close="handleDetailClose"
        @edit="handleEditTask"
        @refresh="initData"
      />
    </el-dialog>

    <!-- 原有的协同任务对话框（保留） -->
    <el-dialog title="任务详情" :visible.sync="formVisible" width="80%">
      <div class="collaborPage">
        <!-- 协同任务的内容保持不变 -->
      </div>
    </el-dialog>

    <Form6 v-if="formVisible6" ref="Form6" @refreshDataList="initData" />
  </div>
</template>

<script>
import mixin from '@/mixins/generator/index'
import {getTaskById,getTaskById1} from '@/api/group'
import Form from "./Form";
import Form6 from "./Form6";
import TaskDetail from "./TaskDetail";

export default {
  name: 'homeworkManagement',
  mixins: [mixin],
  components: {Form, Form6, TaskDetail},

  data() {
    return {
      formVisible6: false,
      list: [],
      listLoading: false,
      pageInfo: {
        page: 1,
        size: 10,
        fText: "",
        fExecutionStatus: "",
        fType: "",
        fRealName: "",
        fAccount: "",
        fTaskNumber: "",
        startDate: null,
        endDate: null
      },
      pagination: {
        current: 1,
        size: 10,
        total: 0
      },
      formVisible: false, // 协同任务对话框
      detailVisible: false, // 个人任务详情对话框
      currentTask: {}, // 当前查看的任务数据
      detailDialogTitle: '任务详情'
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    addHandle() {
      this.formVisible6 = true;
      this.$nextTick(() => {
        this.$refs.Form6.init();
      });
    },

    // 打开任务详情 - 修复后的方法
    openDetails(row) {
      console.log('打开详情，行数据:', row);

      // 确保数据格式正确
      this.currentTask = {
        fId: row.fid, // 注意字段名大小写
        fType: row.ftype,
        fText: row.ftext,
        fExecutionStatus: row.fexecutionStatus,
        fTaskNumber: row.ftaskNumber,
        fRealName: row.frealName,
        fInstantperson: row.finstantperson,
        fBegindate: row.fbegindate,
        fEnddate: row.fenddate
      };

      console.log('处理后传递给详情组件的数据:', this.currentTask);

      this.detailDialogTitle = `任务详情 - ${row.ftext || '未知任务'}`;
      this.detailVisible = true;

      // 添加调试信息
      console.log('弹框状态 detailVisible:', this.detailVisible);
    },

    // 关闭详情
    handleDetailClose() {
      console.log('关闭详情弹框');
      this.detailVisible = false;
      this.currentTask = {};
    },

    // 编辑任务
    handleEditTask(task) {
      console.log('编辑任务:', task);
    },

    // 获取数据
    async initData() {
      try {
        this.listLoading = true;
        const response = await getTaskById1(this.pageInfo)
        if (response.code === 200) {
          this.list = response.data.list || []
          this.pagination = response.data.pagination || {}
          console.log('任务列表:', this.list);
        } else {
          this.$message.error(response.msg || '获取任务失败')
        }
      } catch (error) {
        console.error('获取任务失败:', error)
        this.$message.error('获取任务失败')
      } finally {
        this.listLoading = false;
      }
    },

    // 搜索
    search() {
      this.pageInfo.page = 1;
      this.initData();
    },

    // 重置
    reset() {
      this.pageInfo = {
        page: 1,
        size: 10,
        fText: "",
        fExecutionStatus: "",
        fType: "",
        fRealName: "",
        fAccount: "",
        fTaskNumber: "",
        startDate: null,
        endDate: null
      }
      this.initData();
    },

    // 分页大小改变
    handleSizeChange(size) {
      this.pageInfo.size = size;
      this.pageInfo.page = 1;
      this.initData();
    },

    // 当前页改变
    handleCurrentChange(page) {
      this.pageInfo.page = page;
      this.initData();
    },

    formatDate(timestamp) {
      if (!timestamp) return '';
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      const seconds = date.getSeconds().toString().padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
  }
}
</script>

<style scoped>
.collaborPage {
  min-height: 400px;
  position: relative;
}

.el-pagination {
  padding: 16px 0;
}
</style>
